<template>
  <div class="verifyDataList">
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between">
          <n-title title="核查数据列表"/>
          <div>
            <el-button size="small" plain type="primary" @click="toVerifyWorkIndex">返回列表</el-button>
          </div>
        </div>
        <div class="ha-top">
          <el-row :gutter="10">
            <el-col :span="10">
              <el-input
                  placeholder="按名称搜索"
                  size="mini"
                  v-model="selectFormModel.departName"
                  clearable
                  clear="onSearch"
                  @keyup.enter.native="onSearch"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-col>
            <el-col :span="10" v-if="sampleType == '1'">
              <el-select v-model="selectFormModel.areaCode" clearable
                         style="margin-right: 10px;" placeholder="请选择下级区划" size="mini" @change="onSearch">
                <el-option
                    v-for="item in subAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <data-table
            :api="selectVerifyDataList"
            ref="dataTable"
            :options="options"
            :columns="columns"
            :operates="operates"
            :query="selectFormModel"
        ></data-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTitle from "@/components/NTitle.vue";
import {selectVerifyDataList} from '@/api/verifyWork';
import { queryUserSubArea} from "@/api/area"
import router from "@/router";

@Component({
  methods: {selectVerifyDataList},
  components: {NTitle, DataTable}
})
export default class verifyDataInfo extends Vue {
  workId: any = router.currentRoute.query.workId;
  verifyTimes: any = router.currentRoute.query.verifyTimes;
  categoryId: any = router.currentRoute.query.categoryId;
  areaCode: any = router.currentRoute.query.areaCode;
  sampleType:any = router.currentRoute.query.sampleType;
  @Ref("areaTreeSelect") areaTreeSelect!: any
  @Ref('dataTable') private dataTable: any;
  subAreaList:any = [];

  selectFormModel: any = {
    workId: router.currentRoute.query.workId,
    verifyTimes: router.currentRoute.query.verifyTimes,
    categoryId: router.currentRoute.query.categoryId,
    areaCode: router.currentRoute.query.areaCode,
    departName: undefined,
  };
  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: false, // 是否支持列表项选中功能
  };
  columns: any = [
    {label: '名称', prop: 'departName', render: function (createElement, context) {
      return createElement('span', {
            attrs: {
              style: 'color:#5b9a8e'
            }
          }, [context.row.departName]
        );
      }
    },
    {label: '地址', prop: 'departAddr'},
    {label: '类型', prop: 'categoryName'},
    {label: '所属普区规划', prop: 'countyName'}
  ];
  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '查看',
        type: 'text',
        icon: 'el-icon-view',
        plain: true,
        disabled: (index: any, row: any) => {
          return false;
        },
        method: (index: any, row: any) => {
          this.$router.push({
            path: '/quality/surveyView',
            query: {
              dataId: row.dataCommonId,
              structureId: row.structureId
            }
          });
        }
      },
    ]
  };

  //获取登录人的下级区域列表
  getUserAreaInfo() {
    queryUserSubArea().then(res=> {
      if (res.data) {
        this.subAreaList = res.data
      }
    })
  }

  toVerifyWorkIndex() {
    this.$router.push({path: '/verify/verifyWork'});
  }

  onSearch(): void {
    this.dataTable.refresh();
  }

  mounted() {
    this.onSearch();
    if (this.sampleType == '1') {
      this.getUserAreaInfo();
    }
  }
  activated() {
    this.sampleType = router.currentRoute.query.sampleType
  }
}
</script>
<style lang="scss" scoped>
.verifyDataList {
  display: flex;
  gap: 10px;

  .ha-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
}
</style>
